import React, { forwardRef, useState, useEffect } from 'react'
import { Form, Input, Select } from 'antd'
const { Option } = Select

const UserForm = forwardRef((props, ref) => {
  const { regionList, roleList } = props
  const [isDisable, setIsDisable] = useState(false)

  const { roleId, region } = JSON.parse(localStorage.getItem("token"))
  const roleObj = {
    "1": "superadmin",
    "2": "admin",
    "3": "editor"
  }
  useEffect(() => {
    setIsDisable(props.isUpdateDisable)
  }, [props.isUpdateDisable])

  const checkRegionDisabled = (item) => {
    if (props.isUpdate) {
      // 更新表单

      if (roleObj[roleId] === "superadmin") {
        // 超级管理员
        return false
      } else {
        return true
      }

    } else {
      // 创建列表
      if (roleObj[roleId] === "superadmin") {
        return false
      } else {
        // console.log(item);
        // 只显示和当前管理员一样的地区
        return item.value !== region
      }
    }

  }

  const checkRoleDisabled = (item) => {
    if (props.isUpdate) {
      // 更新表单

      if (roleObj[roleId] === "superadmin") {
        // 超级管理员
        return false
      } else {
        return true
      }

    } else {
      // 创建列表
      if (roleObj[roleId] === "superadmin") {
        return false
      } else {
        // console.log(item);
        // 只显示和当前管理员一样的地区
        return roleObj[item.id] !== "editor"
      }
    }

  }

  return (
    <Form
      ref={ref}
      layout="vertical"
    >
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="region"
        label="区域"
        rules={isDisable ? [] : [{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Select disabled={isDisable}
        >
          {
            regionList.map(item => {
              return (
                <Option
                  value={item.value}
                  key={item.id}
                  disabled={checkRegionDisabled(item)}
                >{item.title}</Option>
              )
            })
          }
        </Select>
      </Form.Item>

      <Form.Item
        name="roleId"
        label="角色"
        rules={[{ required: true, message: 'Please input the title of collection!' }]}
      >
        <Select onChange={(value) => {
          if (value === 1) {
            setIsDisable(true)
            ref.current.setFieldsValue({
              region: ""
            })
          } else {
            setIsDisable(false)
          }
        }}>
          {
            roleList.map(item => {
              return (
                <Option
                  value={item.id}
                  disabled={checkRoleDisabled(item)}
                  key={item.id}>{item.roleName}</Option>
              )
            })
          }
        </Select>
      </Form.Item>
    </Form>
  )
})
export default UserForm